  <template>
      <!-- 导航栏 -->
      <van-nav-bar :title="TypeName" left-text="返回" left-arrow fixed placeholder z-index="1000" @click-left="back" @click-right="SearchShow = true">
          <template #right>
              <van-icon name="search" size="20" />
          </template>
      </van-nav-bar>

      <!-- 下拉菜单 -->
      <van-sticky :offset-top="46">
        <van-dropdown-menu>
          <van-dropdown-item @change="TypeToggle" v-model="TypeActive" :options="TypeList" />
          <van-dropdown-item @change="FlagToggle" v-model="FlagActive" :options="FlagList" />
          <van-dropdown-item @change="SortToggle" v-model="SortActive" :options="SortList" />
          <van-dropdown-item @change="ByToggle" v-model="ByActive" :options="ByList" />
        </van-dropdown-menu>
      </van-sticky>

      <!-- 搜索框 -->
      <van-popup v-model:show="SearchShow" position="top">
        <van-search v-model="keywords" placeholder="请输入关键词" @search="search" />
      </van-popup>

      <!-- 下拉刷新 -->
      <van-pull-refresh v-model="refreshing" @refresh="refresh">
        <!-- 加载列表 -->
        <van-list v-model:loading="loading" :finished="finished" :offset="10" finished-text="没有更多了" @load="load">
            <div class="list">
                <div class="item" v-for="item in list" :key="item.id">
                    <router-link :to="{path:'/product/info',query:{proid:item.id}}">
                        <div class="thumb">
                            <van-image
                                width="100%"
                                height="150px"
                                fit="cover"
                                :src="item.thumb_text"
                            />
                        </div>
                        <div class="name">{{ item.name }}</div>
                        <div class="box">
                            <div class="price">￥{{ item.price }}</div>
                            <div class="buy-count">{{ item.buy_count }}人付款</div>
                        </div>
                        <div class="box">
                            <div class="region">{{ item.region_text }}</div>
                            <div class="chat">
                                <van-icon name="chat-o" color="#ff5000" size="16" />
                            </div>
                        </div>
                    </router-link>
                </div>
            </div>
        </van-list>
    </van-pull-refresh>

      <!-- 返回顶部 -->
      <van-back-top />
  </template>

  <script setup>
    const {proxy} = getCurrentInstance()

    let TypeList = ref([
      {text: '全部分类', value: '0'},
    ]);

    let FlagList = [
      {text: '全部商品', value: '0'},
      {text: '新品', value: '1'},
      {text: '热销', value: '2'},
      {text: '推荐', value: '3'},
    ];

    let SortList = [
      {text: '按上架时间', value: 'createtime'},
      {text: '按价格', value: 'price'},
      {text: '按库存', value: 'stock'}
    ];

    let ByList = [
      {text: '降序', value: 'desc'},
      {text: '升序', value: 'asc'},
    ];

    let TypeActive = ref('0')
    let FlagActive = ref('0')  //标志 1-新品 2-热销 3-推荐
    let SortActive = ref('createtime') //排序 上架时间 价格 库存
    let ByActive = ref('desc')  //desc 降序 asc 升序
    let SearchShow = ref(false) //搜索框的显示
    let keywords = ref('') //搜索关键词
    let TypeName = ref('全部分类') //标题栏上面的分类名称
    
    let list = ref([]) //数据列表
    let page = ref(1)  //分页
    let loading = ref(false) //加载状态
    let finished = ref(false) //是否无更多数据
    let refreshing = ref(false) //下拉刷新

    //钩子函数获取商品分类数据
    onBeforeMount(() => GetTypeData())

    //获取商品分类
    const GetTypeData = async () => {
      var result = await proxy.$POST({url:'/product/type'})

      if(result.code == 0) return proxy.$fail(result.msg)

      var temp = [] 

      for (var item of result.data)
    {
      temp.push({
        text:item.name,
        value:item.id.toString()
      })
    }

    TypeList.value = TypeList.value.concat(temp)

    GetTypeName()
    }

    //获取当前切换的分类名称
    const GetTypeName = () => 
    {
        TypeList.value.map((item) => (TypeActive.value == item.value) && (TypeName.value = item.text))
    }
    //返回上一页
    const back = () => proxy.$router.go(-1)
    //搜索事件
    const search = async () => 
    {
      SearchShow.value = false
      refreshing.value = true

      //触发刷新效果
      refresh()
    }

    //分类切换
    const TypeToggle = async (value) =>
    {
      refreshing.value = true
      TypeActive.value = value

      GetTypeName()

      refresh()
    }
    //属性切换
    const FlagToggle = async (value) =>
    {
      refreshing.value = true
      FlagActive.value = value
      refresh()
    }

    //排序切换
    const SortToggle = async (value) =>
    {
      refreshing.value = true
      SortActive.value = value
      refresh()
    }

    //升降序切换
    const ByToggle = async (value) =>
    {
      refreshing.value = true
      ByActive.value = value
      refresh()
    }

    //下拉刷新
    const refresh = async () =>
    {
      //可以去掉定时器
      setTimeout(() => {
        //清空查询参数
        page.value = 1
        list.value = []
        finished.value = false
        loading.value = true

        //加载数据方法
        load()
      }, 1000)
    }

    //加载数据方法
    const load = async () =>
    {
      //判断是否为加载中的状态
      if(refreshing.value)
      {
        refreshing.value = false
      }

      var params = {
        page: page.value,
        typeid: TypeActive.value,
        flag: FlagActive.value,
        sort: SortActive.value,
        by: ByActive.value,
        keywords: keywords.value,
      }

      //发送请求
      var result = await proxy.$POST({ url: '/product/index', params })
      //请求发送完毕后，加载状态也就完毕了
      loading.value = false

      if(result.code == 0)
      {
        //如果没有更多数据了 就说明已经加载到底了....
        finished.value = true
        proxy.$fail(result.msg)
        return false
      }

      //赋值数据
      let count = result.data.count ? result.data.count : 0
      list.value = result.data.list ?  list.value.concat(result.data.list) : [];

      //判断是否数据传到达低端
      if(list.value.length >= count) return finished.value = true
      page.value = page.value + 1
    }
  </script>

  <style scoped>
    @import url('/assets/css/ProductIndex.css');
  </style>